<template>
	<view style="padding: 20px">
		<!-- <view class="uniui-arrow-left" @click="goBack">
			<uni-icons type="arrow-left" size="25"></a></uni-icons>
		</view> -->
		<view class="table">
			<view class="title">注册</view>
			<u-form :model="form" ref="uForm">
				<u-form-item label="昵称" prop="nickName" label-position="top">
					<u-input placeholder="请输入昵称" v-model="form.nickName" />
				</u-form-item>
				<u-form-item label="手机号" prop="phone" label-position="top" ref="refPhone">
					<u-input placeholder="请输入手机号" v-model="form.phone" />
				</u-form-item>
				<u-form-item label="验证码" prop="code" label-position="top">
					<view class="unicode">
						<u-input placeholder="请输入验证码" v-model="form.code" />
						<view v-if="isSend" class="sendbtn" @click="sendcode">发送</view>
						<view v-else class="sendbtn dissendbtn" @click="sendcode">{{ seconds }}秒重新获取</view>
					</view>
				</u-form-item>
				<u-form-item label="密码" prop="password" label-position="top" right-icon="eye-off">
					<view class="unipsw">
						<u-input placeholder="请输入密码" v-model="form.password" type="password" :password-icon="true" />
						<uni-icons type="eye-slash" size="30"></uni-icons>
					</view>
				</u-form-item>
				<u-form-item label="确认密码" prop="rePassword" label-position="top">
					<view class="unicfm">
						<u-input placeholder="请再次确认密码" v-model="form.rePassword" :password-icon="true" />
						<uni-icons type="eye-filled" size="30"></uni-icons>
					</view>
				</u-form-item>

				<u-button @click="submit" class="enroll">注册</u-button>
			</u-form>

			<view style="display: flex">
				<view class="select">
					已有账号，去
					<navigator url="/subpkg/submy/sublogin/phoneCodeLogin" open-type="reLaunch" class="toLogin">&nbsp;登录</navigator>
				</view>
			</view>

			<view class="prompt">登录/注册表示您同意用户协议和隐私政策</view>
		</view>
	</view>
</template>

<script>
import { sendcode, register } from '@/http/api.js';

export default {
	// 返回首页
	onNavigationBarButtonTap() {
		uni.reLaunch({
			url: '/pages/home/home'
		});
	},
	data() {
		return {
			form: {
				nickName: '我是测试aa02',
				phone: '13456789012',
				code: '',
				rePassword: '',
				password: ''
			},

			rules: {
				nickName: [
					// 必填规则
					{
						required: true,
						message: '请输入昵称',
						trigger: 'blur'
					},
					{
						min: 8,
						max: 20,
						message: '昵称长度为8-20之间',
						trigger: 'blur'
					},
					// 正则判断为字母或数字
					{
						pattern: /^[a-zA-Z0-9\u4e00-\u9fa5]{8,20}$/g,
						// 正则检验前先将值转为字符串
						transform(value) {
							return String(value);
						},
						message: '只能包含字母、数字和中文字符',
						trigger: 'blur'
					}
					// 校验用户是否已存在
					// 	{
					// 		asyncValidator: (rule, value, callback) => {
					// 			this.$u.post('/xxx/xxx', {name: value}).then(res => {
					// 				// 如果验证不通过，需要在callback()抛出new Error('错误提示信息')
					// 				if(res.error) {
					// 					callback(new Error('姓名重复'));
					// 				} else {
					// 					// 如果校验通过，也要执行callback()回调
					// 					callback();
					// 				}
					// 			})
					// 		},
					// 		// 如果是异步校验，无需写message属性，错误的信息通过Error抛出即可
					// 		// message: 'xxx'
					// }
				],
				code: [
					{
						required: true,
						message: '请输入验证码',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur'
					},
					{
						validator: (rule, value, callback) => {
							if (value === '') {
								return callback(new Error('验证码不能为空'));
							}
						}
					},
					{
						min: 6,
						max: 7,
						message: '验证码长度为6-7',
						trigger: 'blur'
					}
				],
				// 字段名称
				phone: [
					{
						required: true,
						message: '请输入手机号码',
						trigger: 'blur'
					},
					{
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						},
						message: '手机号码格式不正确',
						// 触发器可以同时用blur和change
						trigger: 'blur'
					}
				],
				password: [
					{ required: true, message: '请输入密码', trigger: 'blur' },
					// 正则判断为密码至少含一个大写字母、一个小写字母、一个数字和一个特殊字符(!@+=#$%^&*)
					{
						// pattern: /^[0-9a-zA-Z!.@]*$/g,
						pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@!#$%^&*+=])[\da-zA-Z!@+=#$%^&*]{8,20}$/,
						// 正则检验前先将值转为字符串
						transform(value) {
							return String(value);
						},
						message: '密码至少含一个大写字母、一个小写字母、一个数字和一个特殊字符(!@+=#$%^&*等)',
						trigger: 'blur'
					},
					// 8-20个字符之间的判断
					{
						min: 8,
						max: 20,
						message: '长度在8-20个字符之间',
						trigger: 'blur'
					}
				],
				rePassword: [
					{ required: true, message: '请输入确认密码', trigger: 'blur' },
					{
						validator: (rule, value, callback) => {
							if (value === '') {
								console.log(value);
								return callback(new Error('请再次输入密码'));
							} else if (value !== this.form.password) {
								return callback(new Error('两次输入密码不一致!'));
							} else {
								return callback();
							}
						},
						trigger: 'blur'
					}
				]
			},
			// 发送验证码
			isSend: true,
			seconds: 10
		};
	},

	methods: {
		goBack() {
			uni.navigateBack();
		},
		// 注册
		async submit() {
			// 13456432132
			try {
				await this.$refs.uForm.validate();
				try {
					const res = await register(this.form);

					if (res.code === 500) {
						uni.$showMsg(res.msg);
					} else {
						uni.$showMsg('注册成功', 1500);
						setTimeout(() => {
							this.form = {};
							uni.navigateTo({
								url: '/subpkg/submy/sublogin/phoneCodeLogin'
							});
						}, 1500);
					}
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			} catch (err) {
				uni.$showMsg(err[0].message);
			}
		},
		// 发送验证码
		async sendcode() {
			const codeSeconds = 10;
			this.seconds = codeSeconds;

			// 再次校验手机号
			if (this.form.phone && this.form.phone.length === 11) {
				this.isSend = false;
				// 发送中
				if (!this.isSend) {
					try {
						uni.showLoading({
							title: '加载中',
							mask: true
						});

						// 发请求
						const res = await sendcode(this.form.phone);
						if (res.code === 500) {
							uni.$showMsg(res.msg);
							this.isSend = true
						} else {
							uni.hideLoading();
							
							// 查看验证码
								uni.showModal({
									title: '提示',
									content: '验证码为 ' + res.data.data,
									showCancel: false
								});
								// 直接验证码赋值
								this.form.code = res.data.data;
							
							// 倒计时
							const timer = setInterval(() => {
								if (this.seconds > 1) {
									this.seconds--;
								} else {
									clearInterval(timer);
									this.seconds = codeSeconds;
									this.isSend = true;
								}
							}, 1000);
						}

						// 模拟请求
						// setTimeout(() => {
						// 	uni.hideLoading();
						// 	const timer = setInterval(() => {
						// 		if (this.seconds > 1) {
						// 			this.seconds--;
						// 		} else {
						// 			clearInterval(timer);
						// 			this.isSend = true;
						// 			this.seconds = codeSeconds;
						// 			uni.showModal({
						// 				title: '提示',
						// 				content: '验证码为 '+ '1234567',
						// 				showCancel:false									});
						// 			this.form.code = '1234567';
						// 			console.log(this.form.code);

						// 		}
						// 	}, 1000);
						// }, 1500);
					} catch (err) {
						// 请求失败，可重新发送
						this.isSend = true;
						this.seconds = codeSeconds;
					}
				} else {
				}
			} else {
				uni.$showMsg('请正确输入手机号');
			}
		}
	},
	// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	}
};
</script>

<style scoped>
::v-deep .u-input {
	border: 0 !important;
	border-bottom: 2rpx solid #ccc !important;
	padding-left: 0 !important;
}
::v-deep .u-form-item {
	margin-top: 30rpx !important;
}
::v-deep .u-form-item__body {
	padding: 0 !important;
}
::v-deep .u-form-item__body__left__content__label {
	font-size: 32rpx;
	padding: 8rpx 0;
	margin-bottom: 20rpx;
}
::v-deep .u-form-item__body__right__message {
	margin-left: 0 !important;
}
::v-deep .u-input__content__field-wrapper__field {
	font-size: 32rpx !important;
}
::v-deep .u-form-item__body__left {
	width: 100% !important;
}
.uniui-arrow-left {
	margin-top: 20rpx;
}
.table .title {
	margin-bottom: 70rpx;
	margin-top: 40rpx;
	font-weight: 700;
	font-size: 56rpx;
	color: #101010;
}
.table form {
	width: 100%;
	height: 700rpx;
}

.table view {
	font-size: 32rpx;
	padding: 8rpx 0;
	margin-bottom: 20rpx;
}
.table input {
	border-bottom: 2rpx solid #ccc;
	margin-bottom: 20rpx;
}
.unicode,
.unipsw,
.unicfm {
	position: relative;
	width: 100%;
}
.unicode button,
.sendbtn {
	position: absolute;
	width: 180rpx;
	font-size: 32rpx;
	color: #fff;
	text-align: center;
	top: 0;
	right: 0;
	background-color: #00dcb6;
	border-radius: 16rpx;
	padding: 14rpx 0 !important;
}
.dissendbtn {
	width: 280rpx;
	background-color: grey;
	pointer-events: none;
}
.unipsw ::v-deep .uni-icons,
.unicfm ::v-deep .uni-icons {
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
}
.enroll,
::v-deep .u-button {
	margin: 60rpx 0 !important;
	height: 100rpx !important;
	border-radius: 20rpx !important;
	font-size: 38rpx !important;
	color: #fff !important;
	line-height: 100rpx !important;
	background-color: #00dcb6 !important;
}
.select {
	display: flex;
	justify-content: center;
	flex: 1;
	margin-bottom: 20rpx;
}
.select .toLogin {
	color: #00dcb6;
	/* vertical-align: baseline; */
}

.prompt {
	text-align: center;
	font-size: 24rpx;
	color: #ccc;
}
</style>
